<template>
    <StudentForm :student="student" @submit="handleSubmit" />
</template>

<script setup>
import StudentForm from '../components/StudentForm.vue'
import { ref, onMounted } from 'vue'
import { useStudentStore } from '../stores/student'
import { useRouter, useRoute } from 'vue-router'

const studentStore = useStudentStore()
const router = useRouter()
const route = useRoute()

const student = ref({
    id: null,
    grades: {
        frontend: null,
        english: null,
        python: null
    }
})

onMounted (() => {
    const s = studentStore.getStudentById(Number(route.params.id))
    if (s) {
        student.value.id = s.id
        student.value.grades = {...s.grades}
    }
})

const handleSubmit = () => {
    studentStore.updateStudentGrades(student.value.id, student.value.grades)
    router.push('/students')
}
</script>